import "./index.scss";
import { useState, useEffect } from "react";
import {
  EditOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
} from "@ant-design/icons";
import {
  Breadcrumb,
  Divider,
  Tree,
  Card,
  Checkbox,
  Radio,
  Table,
  Space,
} from "antd";
import type { ColumnsType } from "antd/es/table";
import { useNavigate } from "react-router-dom";
import type { DataNode, TreeProps } from "antd/es/tree";
import type { CheckboxChangeEvent } from "antd/es/checkbox";
import type { CheckboxValueType } from "antd/es/checkbox/Group";
import type { RadioChangeEvent } from "antd";

interface DataType {
  key: React.Key;
  num: number;
  fieldName: string;
  fieldPermissions: string;
}

// 功能权限数据
const treeData: DataNode[] = [
  {
    title: "全部功能",
    key: "0-0",
    children: [
      {
        title: "系统管理",
        key: "0-0-0",
        //   disabled: true,//禁用
        children: [
          {
            title: "角色管理",
            key: "0-0-0-0",
            //   disableCheckbox: true,//默认选中
          },
          {
            title: "用户管理",
            key: "0-0-0-1",
          },
          {
            title: "权限管理",
            key: "0-0-0-2",
          },
        ],
      },
      {
        title: "学校管理",
        key: "0-0-1",
        children: [
          {
            title: <span>学校管理</span>,
            key: "0-0-1-0",
          },
        ],
      },
      {
        title: "数据管理",
        key: "0-0-2",
        children: [
          {
            title: <span>学生管理</span>,
            key: "0-0-2-0",
          },
          {
            title: <span>教职工管理</span>,
            key: "0-0-2-1",
          },
          {
            title: <span>班级管理</span>,
            key: "0-0-2-2",
          },
        ],
      },
      {
        title: "缴费管理",
        key: "0-0-3",
        children: [
          {
            title: <span>缴费项目管理</span>,
            key: "0-0-3-0",
          },
          {
            title: <span>缴费进度管理</span>,
            key: "0-0-3-1",
          },
          {
            title: <span>缴费明细管理</span>,
            key: "0-0-3-2",
          },
        ],
      },
      {
        title: "订单管理",
        key: "0-0-4",
        children: [
          {
            title: <span>订单管理</span>,
            key: "0-0-4-0",
          },
        ],
      },
      {
        title: "开发配置",
        key: "0-0-5",
        children: [
          {
            title: <span>菜单管理</span>,
            key: "0-0-5-0",
          },
          {
            title: <span>页面管理</span>,
            key: "0-0-5-1",
          },
        ],
      },
    ],
  },
];

//菜单、字段权限选项卡
const tabList = [
  {
    key: "菜单权限",
    tab: "菜单权限",
  },
  {
    key: "字段权限",
    tab: "字段权限",
  },
];

// 字段权限选项卡
const tabList1 = [
  {
    key: "全部字段",
    tab: "全部字段",
  },
  {
    key: "指定字段",
    tab: "指定字段",
  },
];

// const contentList: Record<string, React.ReactNode> = {
//   菜单权限: <p>content1</p>,
//   字段权限: <p>content2</p>,
// };

//菜单权限多选框
const CheckboxGroup = Checkbox.Group;
const plainOptions = ["新增", "修改", "删除", "查询", "重置", "下载"];

//函数组件
const PermissionManagement: React.FC = () => {
  //树结构
  const onSelect: TreeProps["onSelect"] = (selectedKeys, info) => {
    console.log("selected", selectedKeys, info);
  };

  const onCheck: TreeProps["onCheck"] = (checkedKeys, info) => {
    console.log("onCheck", checkedKeys);
    console.log("onCheckinfo", info.node);
  };

  //权限选项
  const [activeTabKey1, setActiveTabKey1] = useState<string>("菜单权限");
  const onTab1Change = (key: string) => {
    setActiveTabKey1(key);
  };
  // 字段权限选项
  const [activeTabKey2, setActiveTabKey2] = useState<string>("全部字段");
  const onTab2Change = (key: string) => {
    setActiveTabKey2(key);
  };

  //菜单权限多选项目
  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>();
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);
  const onChange = (list: CheckboxValueType[]) => {
    console.log(list);
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };

  const onCheckAllChange = (e: CheckboxChangeEvent) => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  //全部字段数据
  const [value, setValue] = useState(1);
  const onChangeR = (e: RadioChangeEvent) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };

  // 表格数据
  const columns: ColumnsType<DataType> = [
    {
      title: "序号",
      dataIndex: "num",
    },
    {
      title: "字段名称",
      dataIndex: "fieldName",
    },
    {
      title: "字段权限",
      dataIndex: "fieldPermissions",
      render: () => (
        <Space>
          <Radio.Group onChange={onChangeR}>
            <Radio value={1}>只读</Radio>
            <Radio value={2}>编辑</Radio>
            <Radio value={3}>不可见</Radio>
          </Radio.Group>
        </Space>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      num: 1,
      fieldName: "机构编码",
      fieldPermissions: "",
    },
    {
      key: "2",
      num: 2,
      fieldName: "机构编码",
      fieldPermissions: "",
    },
    {
      key: "3",
      num: 3,
      fieldName: "机构编码",
      fieldPermissions: "",
    },
    {
      key: "4",
      num: 4,
      fieldName: "机构编码",
      fieldPermissions: "",
    },
  ];
  const pagination = {
    defaultPageSize: 5,
    defaultCurrent: 1,
    total: data.length,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 15, 20],
  };

  return (
    <div className="system">
      {/* 路径 */}
      <div className="title">
        <Breadcrumb separator=">">
          <Breadcrumb.Item>系统管理</Breadcrumb.Item>
          <Breadcrumb.Item href="#">权限管理</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className="content">
        <div className="content-left">
          <div className="title-role">
            系统角色
            <span className="total-icon">
              <EditOutlined className="icon" />
              <MinusCircleOutlined className="icon" />
              <PlusCircleOutlined />
            </span>
          </div>
          <ul>
            <li>系统管理员</li>
            <li>业务管理员</li>
          </ul>
          <div className="title-role">
            机构角色
            <span className="total-icon">
              <EditOutlined className="icon" />
              <MinusCircleOutlined className="icon" />
              <PlusCircleOutlined />
            </span>
          </div>
          <ul>
            <li>学费管理员</li>
            <li>物业费管理员</li>
            <li>党费管理员</li>
          </ul>
          <div className="title-role">
            销售角色
            <span className="total-icon">
              <EditOutlined className="icon" />
              <MinusCircleOutlined className="icon" />
              <PlusCircleOutlined />
            </span>
          </div>
          <ul>
            <li>销售人员</li>
            <li>售后人员</li>
          </ul>
        </div>
        <div className="content-right">
          <div className="rightTop">
            <div>功能权限</div>
            <div>数据权限</div>
          </div>
          <div className="rightBottom">
            <div className="rightBottom-left">
              {/* 功能权限 */}
              <Tree
                rootClassName="treeStyle"
                checkable
                defaultExpandedKeys={["0-0"]}
                // defaultSelectedKeys={["0-0-0", "0-0-1"]}
                // defaultCheckedKeys={["0-0-0", "0-0-1"]}
                onSelect={onSelect}
                onCheck={onCheck}
                treeData={treeData}
              />
            </div>
            <Divider
              style={{
                height: "400px",
                background: "#eee",
                borderInlineStart: "2px solid rgba(5, 5, 5, 0.06)",
              }}
              type="vertical"
            />
            <div className="rightBottom-right">
              {/* 菜单、字段权限选项卡 */}
              <Card
                style={{ width: "500px" }}
                tabList={tabList}
                activeTabKey={activeTabKey1}
                onTabChange={(key) => {
                  onTab1Change(key);
                }}
              >
                {
                  {
                    菜单权限: (
                      <div style={{ display: "flex", flexDirection: "column" }}>
                        <Checkbox
                          // indeterminate={indeterminate}
                          onChange={onCheckAllChange}
                          checked={checkAll}
                        >
                          全部菜单
                        </Checkbox>
                        <CheckboxGroup
                          className="groupStyle"
                          options={plainOptions}
                          value={checkedList}
                          onChange={onChange}
                        />
                      </div>
                    ),
                    字段权限: (
                      <div>
                        <Card
                          bordered={false}
                          style={{ width: "500px" }}
                          tabList={tabList1}
                          activeTabKey={activeTabKey2}
                          onTabChange={(key) => {
                            onTab2Change(key);
                          }}
                        >
                          {
                            {
                              全部字段: (
                                <div>
                                  <span>字段权限： </span>
                                  <Radio.Group
                                    onChange={onChangeR}
                                    value={value}
                                  >
                                    <Radio value={1}>只读</Radio>
                                    <Radio value={2}>编辑</Radio>
                                    <Radio value={3}>不可见</Radio>
                                  </Radio.Group>
                                </div>
                              ),
                              指定字段: (
                                <div>
                                  {/* 表格 */}
                                  <Table
                                    bordered={true}
                                    columns={columns}
                                    dataSource={data}
                                    pagination={pagination}
                                  />
                                </div>
                              ),
                            }[activeTabKey2]
                          }
                        </Card>
                      </div>
                    ),
                  }[activeTabKey1]
                }
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default PermissionManagement;
